<template>
    <div>
      <!-- <el-button type="primary" @click="handleAdd">新增</el-button> -->
      <!-- 添加搜索框和按钮 -->
      <el-input
        v-model="searchKeyword"
        placeholder="请输入关键词"
        style="width: 200px; margin-left: 20px;"
      >
        <template slot="append">
          <el-button @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
      <el-table :data="filteredTableData" style="width: 80%" class="center-table">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="username" label="名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 根据 status 动态显示按钮文字、调用不同方法并设置字体颜色 -->
            <el-button
              size="mini"
              @click="scope.row.status === 1 ? handleEnable(scope.row) : handleEnable(scope.row)"
              :style="{ color: scope.row.status === 1 ? 'red' : 'white' }"
            >
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          { id: 1, username: '项目1', status: 0 },
          { id: 2, username: '项目2', status: 1 },
        ],
        searchKeyword: '', // 搜索关键词
        filteredTableData: [] // 过滤后的表格数据
      };
    },
    mounted() {
      this.init()
      
    },
    methods: {
      init(){
        this.axios.get('/admin/employee/listAll').then(res => {
        this.tableData = res.data.data; // 假设接口返回的数据在 res.data 中 
        this.filteredTableData = this.tableData; // 初始化过滤数据
        console.log(this.filteredTableData)
        }).catch(error => {
            console.error('Error fetching data:', error);
          });
      },
      handleAdd() {
        this.$router.push('/add');
      },
      // 启用方法
      handleEnable(row) {
        const loading = this.$loading({
          lock: true,
          text: '启用中，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        
        this.axios.post('/admin/employee/update',
          {
            id: row.id,
            status: row.status?0:1
          }
        ).then(res => {
          loading.close();
          this.$message({
            type: 'success',
            message: '修改成功'
          });
          this.init();
        }).catch(error => {
          loading.close();
          this.$message({
            type: 'error',
            message: '修改失败，请稍后重试'
          });
          console.error('修改数据时出错:', error);
        });
      },
      
      handleDelete(row) {
        const loading = this.$loading({
          lock: true,
          text: '删除中，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.delete('/admin/employee/delete/'+row.username).then(res => {
          loading.close();
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.init();
        }).catch(error => {
          loading.close();
          this.$message({
            type: 'error',
            message: '删除失败，请稍后重试'
          });
          console.error('删除数据时出错:', error);
        });
      },
      handleSearch() {
        if (this.searchKeyword === '') {
          this.filteredTableData = this.tableData;
        } else {
          this.filteredTableData = this.tableData.filter(item => {
            return item.username.includes(this.searchKeyword);
          });
        }
      }
    },
  };
  </script>
  
  <style scoped>
  .center-table {
    margin: 0 auto;
  }
  </style>